<template>
  <div>
      <div style="display: flex; justify-content: space-between;">
        <el-radio-group v-model="radio" size="mini" @input="collectChange">
          <el-radio-button :label="false">全部</el-radio-button>
          <el-radio-button :label="true">收藏</el-radio-button>
        </el-radio-group>
        <el-button v-if="isShow" type="success" size="mini" @click="uploaddialogVisible = true">上传素材</el-button>
      </div>
      <el-row :gutter="10">
        <el-col class="container" @click.native="selected = index" :lg="4" :md="6" :sm="8" :xs="12" v-for="(img,index) in imageList" :key="img.id">
          <div class="demo-images">
            <el-image :src="img.url" fit="cover" class="el-images">
              <!-- 没有图片时默认显示的图片 -->
              <div slot="error" class="image-slot">
                <img src="../no-cover.gif" />
              </div>
            </el-image>
            <div class="iconbox" v-if="isShow">
              <!-- <i :class="{
                    'el-icon-star-off': !img.is_collected,
                    'el-icon-star-on': img.is_collected
                  }" @click="oncollect(img)"></i>
                  <i class="el-icon-delete"></i> -->
              <el-button @click="oncollect(img)" :disabled="img.imgloading" class="btn-icon" type="warning"
                v-show="img.is_collected" size="mini" icon="el-icon-star-on" circle></el-button>
              <el-button @click="oncollect(img)" :disabled="img.imgloading" class="btn-icon" type="warning"
                v-show="!img.is_collected" size="mini" icon="el-icon-star-off" circle></el-button>
              <el-button @click="ondelete(img)" :disabled="img.imgloading" class="btn-icon" type="danger" size="mini" icon="el-icon-delete" circle>
              </el-button>
            </div>
            <div class="selectedbox" v-if="isSelected && selected === index"></div>
          </div>
        </el-col>
      </el-row>

      <!-- 分页
            属性:
              page-size: 一页展示 ? 条
              current-page: 当前在第 ? 页
              total: 后台有多少条数据,配合page-size属性告诉组件让组件划分多少页
              @current-change: 页码发生时触发的事情,请求下一页数据或某页的数据
          -->
      <el-pagination background layout="prev, pager, next" :page-size="pageSize" :current-page.sync="current_page"
        @current-change="getImageMaterial" :disabled="loading" :total="total">
      </el-pagination>

    <el-dialog title="上传素材接口已失效" :visible.sync="uploaddialogVisible" append-to-body width="30%">
    </el-dialog>
  </div>
</template>
<script>
  import {
    reqGetImage,
    reqStartImage,
    reqDeleteImage
  } from '@/api'
  export default {
    name: 'ImageList',
    props: {
      // 是否显示 icon图标 ,组件复用
      isShow: {
        type: Boolean,
        default: true
      },
      // 是否显示选中状态盒子
      isSelected: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        radio: false,
        imageList: [], // 素材图片数组
        uploaddialogVisible: false,
        total: 0, // 素材图片总数量
        pageSize: 10, // 每页显示数量
        current_page: 1, // 当前页码值
        loading: false, // 是否允许发起请求的标识
        selected: null, // 存储当前选中素材项的索引
      }
    },
    created() {
      this.getImageMaterial()
    },
    methods: {
      // 获取图片的接口已废弃,只能用线上的
      async getImageMaterial() {
        this.loading = true // 防止疯狂点击下一页,节流
        try {
          const res = await reqGetImage({
            collect: this.radio,
            page: this.current_page,
            per_page: this.pageSize
          })
          if (res.data.results) {
            let result = res.data.results
            result.forEach(img => {
              img.imgloading = false
            })
            this.imageList = result
            this.total = res.data.total_count
          }
          // console.log(res)
        } catch (error) {
          console.log(error)
        } finally {
          this.loading = false
        }
      },
      // 筛选素材图片是否为收藏
      collectChange(value) {
        // 重置高亮页码,防止数据和页码不对应
        this.current_page = 1
        this.getImageMaterial()
      },
      // 收藏/取消收藏图片
      async oncollect(img) {
        try {
          img.imgloading = true // 当前img为装圈圈状态防止疯狂点击请求
          const res = await reqStartImage(img.id, !img.is_collected)
          this.$message({
            type: 'success',
            message: res.data.collect ? '收藏成功' : '取消收藏'
          })
          this.getImageMaterial()
          console.log(res)
        } catch (e) {
          console.log(e)
        } finally {
          img.imgloading = false
        }
      },
      // 删除图片
       async ondelete(img) {
          await reqDeleteImage(img.id)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          // 删除完图片再次重新请求会失败,这什么问题？后端问题？？
          this.getImageMaterial()
      }
    },
    computed: {},
    components: {}
  }
</script>
<style lang="less" scope>
  .clearfix::after,
  .clearfix::before {
    content: '';
    display: block;
    clear: both;
  }
  .el-pagination {
    margin-top: 10px;
  }
  .el-row {
    padding-top: 10px;
  }
  .selectedbox {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3) url('./下载.png') no-repeat;
    background-position: 50%;
    background-size: 50px;
    position: absolute;
        top: 0;
        left: 0;
  }
  .demo-images {
    height: 100%;
    position: relative;
    // width: 220px;
    // height: 140px;
  }

  .el-images {
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 130px;
    }
  }

  .container {
    position: relative;
    height: 120px;
    padding-bottom: 10px;
  }

  .iconbox {
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
    bottom: 3px;
    width: 93%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    i {
      font-size: 25px;
    }

    .el-icon-star-on {
      color: red;
    }

    .btn-icon {
      position: relative;
      width: 30px;
      height: 30px;

      i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
</style>
